import './index.css';
import { useState } from 'react';

type TSwitchProps = {
   checked?: boolean;
   onChange?: (value: boolean) => void;
   disabled?: boolean;
   label?: string;
   offLabel?: string;
   onLabel?: string;
};

const Switch = ({
   checked: checkedProp = false,
   onChange,
   disabled = false,
   label = '',
   offLabel = '',
   onLabel = '',
}: TSwitchProps) => {
   const [checked, setChecked] = useState(checkedProp);

   // 处理开关状态变化
   const handleChange = () => {
      if (!disabled) {
         onChange && onChange(!checked);
         setChecked(!checked);
      }
   };

   return (
      <div
         className={`slider ${checked ? 'checked' : ''}`}
         onClick={handleChange}
      >
         <div className="slider-handler"></div>
         <span className="slider-label">
            {label}
            {checked ? offLabel : onLabel}
         </span>
      </div>
   );
};

export default Switch;
